// WebKit-Style Custom
//@import "../../assets/images/sidebar-bg-grass.png";
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

@mixin w-h-100 {
    width: 100%;
    height: 100%;
}

.scroll-touch{
    -webkit-overflow-scrolling: touch;
}

@mixin scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.p-0-5b {
    padding: 0 5%
}

#home {
    position: fixed;
    background-color: #1f1f1f;
    background-size: cover;
    @include w-h-100;
}

.min-h-550 {
    min-height: 550px;
}

.page-content {
    position: relative;
    z-index: 10;
    background-color: white;
    @include w-h-100;
}

.scroll {
    @include scroll;
}

.page-sidebar {
    width: 70%;
    max-width: 400px;
    height: 100%;
    min-width: 280px;
    z-index: 2;
    top: 0;
    position: fixed;
    //background-image: url("G:/IDEA/WebstormProjects/dbeatles-web/src/main/js/assets/images/sidebar-bg-grass.png");
    background-size: cover;
}

.k {
    width: 35px;
    height: 35px;
    border: 1px solid;
    border-radius: 50% !important;
    padding: 9px 5px;
}

.f {
    border-color: #8497BE;
    color: #8497BE
}

.s {
    border-color: #D846A1;
    color: #D846A1
}

.t {
    border-color: #71B3FF;
    color: #71B3FF
}

#header_bar {
    width: 100%;
    height: 50px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #5f5f5f;
    padding-top: 15px;
}

hr {
    margin: 15px 0
}

.deploy-sidebar:hover,
.deploy-sidebar {
    color: #000;
    text-decoration: none
}

.deploy-sidebar > i {
    top: 15px;
    font-size: 18px;
    display: inline-block
}

.deploy-sidebar > div {
    display: block;
    text-align: right;
    padding-right: 0;
    font-style: normal;
    font-size: 15px;
    color: #1f1f1f;
    display: inline-block;
    float: right;
    width: 100%;
    margin-top: -25px;
    padding-left: 30px
}

#sidebar {
    width: 100%
}

.sidebar-section {
    width: 100%;
    height: auto
}

.sidebar-section a, .sidebar-section a:hover, .sidebar-section em {
    color: white;
}

.input-group > span {
    border: none;
    max-width: 52px;
    min-width: 52px;
}

.list-group > a:hover,
.list-group > a:active,
.list-group > a {
    background-color: transparent;
    color: white;
    text-align: left;
    border-radius: inherit;
    border: none
}

.list-group > a > span {
    float: right
}

.list-group > ul > li > a {
    color: #FFFFFF;
    opacity: 0.3;
    padding-left: 40px
}

.list-group > ul > li > a > span {
    float: right
}

.hr {
    border-top: 1px solid #5f5f5f;
}

.div-avatar {
    height: 100%;
    padding: 15px 0;
    width: auto;
    display: inline-block;
    float: left
}

.div-user-info {
    height: 100%;
    width: 76%;
    display: inline-block;
    float: left;
    padding: 10px 10px 10px 20px
}

.div-user-info > h5 {
    font-size: 15px
}

.div-user-info > h6 {
    font-size: 12px
}

.div-user-info * {
    color: white
}

#login {
    padding: 28px;
    width: auto;
    display: inline-block
}

#login > a {
    width: 130px
}

.login > h2 {
    padding-top: 30px
}

.form {
    padding-bottom: 10px
}

.m-ud-10 {
    margin: 10px auto
}

.p-ud-10 {
    padding: 10px 0
}

.w-100 {
    width: 100%
}

.up-down-border {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd
}

.m-l-15 {
    margin-left: 15px
}

.sidebar-decoration {
    width: 90%;
    height: 90px;
    border-bottom: 1px solid #5f5f5f;
    margin: 0 auto
}

#qq {
    color: white;
    background-color: #272727
}

#steam {
    color: #272727;
    background-color: whitesmoke
}

#wechat {
    color: white;
    background-color: green
}

.icon-login-div {
    padding: 5px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: inline-block;
    margin: 5px
}

#weibo {
    color: red;
    background-color: #FFC78E
}

.home-container {
    padding: 10px 5%;
}

.p-t-50 {
    padding-top: 50px
}

.rotate {
    -moz-animation: rotate 1s infinite linear;
    -webkit-animation: rotate 1s infinite linear;
    animation: rotate 1s infinite linear;
}

@-moz-keyframes rotate {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.load {
    @include w-h-100;
    z-index: 20;
    position: fixed;
    opacity: 0.9;
    background-color: whitesmoke
}

.m-t50b-lf-auto {
    margin: 50% auto 10px auto;
}

.footer {
    width: 100%;
    bottom: 0
}

.b-t {
    border-top: 1px solid #ddd;
}

.no-b-r{border-radius: 0 !important;}
.w-h-100{width: 100px;height: 100px}
.w-h-50{width: 50px;height: 50px}
